<template>
  <div v-if="show" class="overlay" @click.self="emitClose">
    <div class="dialog" role="dialog" aria-modal="true" :aria-label="title || '提示'">
      <button class="close" aria-label="关闭" @click="emitClose">×</button>
      <h3 class="title" v-if="title">{{ title }}</h3>
      <p class="message">{{ message }}</p>
      <div class="actions">
        <button class="btn primary" @click="$emit('primary')">{{ primaryText }}</button>
        <button v-if="showSecondary" class="btn" @click="$emit('secondary')">{{ secondaryText }}</button>
      </div>
    </div>
  </div>
  
</template>

<script>
export default {
  name: 'InfoDialog',
  props: {
    show: { type: Boolean, required: true },
    title: { type: String, default: '' },
    message: { type: String, default: '' },
    primaryText: { type: String, default: '确定' },
    secondaryText: { type: String, default: '取消' },
    showSecondary: { type: Boolean, default: false }
  },
  emits: ['close', 'primary', 'secondary'],
  methods: {
    emitClose() { this.$emit('close') }
  }
}
</script>

<style scoped>
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.dialog { width: min(92vw, 420px); background: #161616; color:#fff; border:1px solid #2a2a2a; border-radius: 12px; padding: 16px 16px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); position: relative; }
.close { position:absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border:1px solid #333; background:#1d1d1d; color:#fff; cursor:pointer; }
.title { margin: 2px 0 8px; font-size: 18px; font-weight: 800; }
.message { color:#d0d4d7; line-height: 1.6; margin: 0 0 12px; }
.actions { display:flex; gap: 10px; justify-content: flex-end; }
.btn { background: rgba(255,255,255,0.12); color:#fff; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 8px 14px; font-size: 14px; cursor: pointer; transition: background .2s ease; }
.btn:hover { background: rgba(255,255,255,0.2); }
.btn.primary { background: #ff4e4e; border-color: #ff4e4e; }
.btn.primary:hover { background: #ff3333; }
</style>
